import React, { Component } from 'react'
import './youhui.css'
import Header from '../../components/header/Header'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions,getshowlist,getn} from '../../store/modules/youhui'
import moment from 'moment'
class Youhui extends Component {
    componentDidMount(){
        let {youhui:{reqlist}}=this.props
        reqlist()
    }
    render() {
        let {list ,n,youhui:{changen}}=this.props
        return (
            <div className='Yhuijuan'>
                <Header title='优惠券'></Header>
                <div className='content'>
                    <div className="nav">
                        <ul>
                            <li  onClick={()=>changen(0)} className={n===0?'select':''}>未使用</li>
                            <li  onClick={()=>changen(1)} className={n===1?'select':''}>已使用</li>
                            <li  onClick={()=>changen(2)} className={n===2?'select':''}>已失效</li>
                        </ul>
                    </div>
                    <div className='yhj'>


                        {/* <div className='youhuijuan'>
                            <div className="shang">
                                <div className="you">
                                    <p>￥<span>99999</span></p>
                                    <span>满99元可用</span>
                                </div>
                                <div className="zuo">
                                    <p>efwwwwwwww</p>
                                   
                                    <span>2021.01.25至2021.0126</span>
                                </div>
                            </div>
                            <div className="xia">vdsvsvsvsvsvsvsvs</div>
                        </div> */}
                        {   list?
                            list.content.map(item=>(
                                <div className='youhuijuan' key={item.id}>
                            <div className="shang">
                                <div className="you">
                                    <p>￥<span>{item.money}</span></p>
                                    <span>满{item.limit_money}元可用</span>
                                </div>
                                <div className="zuo">
                                    <p>{item.title}</p>
                                    <span>{moment(parseInt(item.begintime)).format('YYYY-MM-DD')} 至 {moment(parseInt(item.endtime)).format('YYYY-MM-DD')} </span>
                                </div>
                            </div>
                            <div className="xia">{item.description}</div>
                        </div>
                            )):null
                        } 
                    </div>
                </div>
            </div>
        )
    }
}
let mapStateToProps = state => ({
    list:getshowlist(state),
    n:getn(state)
})
let mapDispatchToProps = dispatch => ({
  youhui:bindActionCreators(actions,dispatch)
})
export default connect(mapStateToProps,mapDispatchToProps)( Youhui)